<template>
	<view>
		<view class="top">
			<u-navbar title="订单时长分析" :title-size="35" :title-bold="true" title-color="#ffffff" :immersive="true"
				:background="background" back-icon-color="#ffffff" :border-bottom="false"></u-navbar>
			<view style="display: flex; width: 90%; height: 20px;padding-top: 120px;
			margin-left: 40rpx;justify-content: space-between;align-items: center;">
				<view class="title">铁西区沈辽路</view>
				<view style="display: flex;">
					<view class="shop" @click="show = true">切换门店</view>
					<view style="width: 24rpx; height: 22rpx;">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png"
							style="width: 100%; height: 100%;" />
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 200px;background-color: #ffffff;">
			<view class="center">
				<view class="time">
					时间维度
				</view>
				<view class="time-dimension">
					<view class="dimension" :class="timeId === index?'dimension-after':'dimension'"
						v-for="(item,index) in list" @click="timelist(index)">
						<view class="dimension-p">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="time">
					快捷选项
				</view>
				<view class="time-dimension">
					<view class="dimension" :class="quickId === index?'dimension-after':'dimension'"
						v-for="(item,index) in quicklist" @click="quickbtn(index)">
						<view class="dimension-p">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="time">
					自定义选项
				</view>
				<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
				<view class="example-body">
					<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" />
				</view>
			</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="bar"
				:opts="{xAxis:{max:40},color:['#FAC858','#EE6666',],extra:{bar:{barBorderCircle:true,seriesGap:5,width: 15,}}}"
				:chartData="chartsDataColumn1" />
		</view>
		<u-select v-model="show" :list="arealist"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartsDataColumn1: {
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
					series: [{
						name: "目标值",
						barWidth: 20,
						data: [35, 36, 31, 33, 13, 34],
						// barGap: 7,
				 }]
				},
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date()),
				datetimeDefaultValueString: '',
				datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 *
					3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,
				timeId: '0',
				quickId: '0',
				show: false,
				arealist: [{
						value: '1',
						label: '铁西滑翔店'
					},
					{
						value: '2',
						label: '华强广场店铺'
					}
				],
				quicklist: [{
					name: '昨日'
				}, {
					name: '今日'
				}, {
					name: '自定义'
				}],
				list: [{
					name: '日'
				}, {
					name: '月'
				}, {
					name: '年'
				}]
			}
		},
		onLoad() {
			// this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
		},
		watch: {

			dateRange() {
				console.log('日期范围选:', this.dateRange);
			}

		},
		methods: {
			timelist(index) {
				this.timeId = index
				console.log(this.timeId)
			},
			quickbtn(index) {
				this.quickId = index
				console.log('quickId', this.quickId)
			},
			maskClick(e) {
				console.log('----maskClick事件:', e);
			},
			getDateTime(date) {
				return `${this.getDate(date)} ${this.getTime(date)}`
			},
			getDate(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${this.addZero(month)}-${this.addZero(day)}`
			},
			getTime(date) {
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ? `${this.addZero(hour)}:${this.addZero(minute)}` :
					`${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F3F3F5;
	}

	.top {
		width: 750rpx;
		height: 307rpx;
		background: #19C865;

	}

	.title {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;

	}

	.charts-box {
		width: 100%;
		height: 100%;
		/* height: 300px; */
	}

	.shop {
		width: 105rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	// .table {
	// 	width: 100%;
	// 	height: 400rpx;
	// 	background-color: aqua;
	// 	margin-top: 20rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	.table-item {
		width: 690rpx;
		height: 198rpx;
		border: 1px solid #EEEEEE;
		// border-radius: 16rpx 16rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-lf {
		width: 120rpx;
		height: 198rpx;
		background: #F3FCF7;
		// border-radius: 16rpx 0rpx 0rpx 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lf-p {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #222222;
	}

	.rg-p {

		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.item-rg {
		width: 570rpx;
		// height: 198rpx;
		background: #ffffff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 10px 10px 0 10px;
	}

	/deep/ .uni-datetime-picker--btn {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item--multiple .uni-calendar-item--before-checked,
	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #19C865 !important;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-between {
		justify-content: space-between;
	}

	.list-item {
		padding: 36rpx 29rpx;
		border-radius: 16rpx 16rpx 0px 0px;
		width: 360px;
		// height: 500px;
		display: flex;
		justify-content: start;
		align-items: center;
		overflow: scroll;
		// margin-top: 20px;
	}

	/deep/ .u-th {
		width: 160rpx;
		height: 98rpx;
		background: #F3FCF7 !important;
		border-top: solid 1rpx #e4e7ed !important;

	}

	/deep/ .u-td {
		width: 160rpx;
		height: 98rpx;

	}

	/deep/ .u-tr {
		width: 160rpx;
		height: 98rpx;

	}





	.example-body {
		background-color: #fff;
		padding: 10px;
	}



	.table {
		width: 690rpx;
		height: 198rpx;
		// background: #F3FCF7;
		// border: 1px solid #EEEEEE;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}



	.detail {
		width: 690rpx;
		height: 108rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		margin: auto;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-top: none;
	}

	.detail-shop {
		display: flex;
		flex: 0.6;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.center {
		width: 750rpx;
		height: 1356rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: -30rpx;
		padding-top: 20rpx;

		.time {
			width: 150rpx;
			height: 27rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-left: 32rpx;
		}

		.time-dimension {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;

			.dimension {
				width: 214rpx;
				height: 64rpx;
				background: #EFEFEF;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dimension-p {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}

			.dimension-after {
				width: 214rpx;
				height: 64rpx;
				background: #01BF53;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dimension-p {

					color: #ffffff;
				}
			}
		}
	}
</style>
